<template>
	<view class="main">
		<view class="search">
			<uni-search-bar class="serch" placeholder="请输入搜索信息" :focus="true" @confirm="search" @clear="cancel" bgColor="#EEEEEE" v-model="keyWord" clearButton="auto" cancelButton="none" />
			<picker class="select" @change="pickerChange" :value="pickerIndex" :range="pickerData">
				<view class="uni-input">{{pickerData[pickerIndex]}}</view>
			</picker>
		</view>
		<view v-if="pickerIndex == 0">
			<view class="serch-params">
				<view class="title">
					<view class="line"></view>类型
				</view>
				<view class="item-list">
					<view @click="changeClassify(item,index)" :class="classifyIndex==index ? 'current':''" v-for="(item,index) in classifyData" :key="index">{{ item }}</view>
				</view>
			</view>
			<view class="serch-params">
				<view class="title">
					<view class="line"></view>格式
				</view>
				<view class="item-list">
					<view @click="changeFormat(item,index)" :class="formatIndex==index ? 'current':''" v-for="(item,index) in formatData" :key="index">{{ item }}</view>
				</view>
			</view>
			<view class="serch-params">
				<view class="title">
					<view class="line"></view>日期
				</view>
				<view class="item-list">
					<view @click="changeDateType(item,index)" :class="dateTypeIndex==index ? 'current':''" v-for="(item,index) in dateTypeData" :key="index">{{ item }}</view>
					<uni-datetime-picker v-model="timePicker" type="daterange" rangeSeparator="~" @change="changeDataPicker" />
				</view>
			</view>
			<view class="serch-params" v-if="pickerData.length > 1">
				<view class="title">
					类别
				</view>
				<view class="item-list">
					<view @click="changeCategory(item,index)" :class="categoryIndex==index ? 'current':''" v-for="(item,index) in pickerData" :key="index">{{ item }}</view>
				</view>
			</view>
		</view>
		
		<view v-if="cateStr">
			<view v-if="cateStr == 'bxjkxl' || cateStr == 'xchd'">
				<view class="serch-params">
					<view class="item-list">
						<view @click="changeCategory(item1.classifyName,index1)" :class="categoryIndex==index1 ? 'current':''" v-for="(item1,index1) in cateList[cateStr]" :key="index1">{{ item1.classifyName }}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="serch-params" v-for="(item,index) in cateList[cateStr]" :key="index">
					<view class="title">
						<view class="line"></view>{{ item.classifyName }}
					</view>
					<view class="item-list">
						<view @click="changeCategory(item1.classifyName,item1.uid)" :class="categoryIndex==item1.uid ? 'current':''" v-for="item1 in item['children']" :key="item1.uid">{{ item1.classifyName }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="list-view">
			<view class="list-item" v-for="item in list" :key="item.uid" @click="goDetails(item)">
				<view class="left">
					<image :src="item.img_url"></image>
				</view>
				<view class="right">
					<view class="title">
						<view class="titleName"> {{item.title}} </view>
					</view>
					<view class="from-and_date">
						<text v-if="item.origin">{{item.origin}}|</text>
						{{item.publish_time}}
					</view>
				</view>
			</view>
			<view class="isOver" v-if="isOver">{{ overText }}</view>
		</view>
	</view>
</template>

<script>
import * as search from '../../common/api/search.js'
	export default {
		data() {
			return {
				pageIndex:1,
				pageSize:10,
				total:0,
				isOver:false,
				overText:'---我是有底线的---',
				keyWord:'',
				startTime: "",
				endTime: "",
				timePicker:'',
				pickerData: ['全部'],
				pickerIndex: 0,
				optionType:'全部',
				category:'全部',
				categoryIndex:0,
				classifyData:['全部','搜标题','搜内容','搜来源','搜机构'],
				classify:'全部',
				classifyIndex:0,
				formatData:['全部','视频','音频','文章'],
				format:'全部',
				formatIndex:0,
				dateTypeData:['全部','近一周','近一月','近半年','近一年'],
				dateType:'全部',	
				dateTypeIndex:0,
				list:[],
				cateList:{
					'jksx':[],
					'bxjkxl':[],
					'jkzs':[],
					'kpzl':[],
					'xchd':[],
				},
				listParams: [
					{ title: '健康陕西', cate: 'jksx' },
					{ title: '百姓健康系列栏目', cate: 'bxjkxl' },
					{ title: '健康知识', cate: 'jkzs' },
					{ title: '科普资料', cate: 'kpzl' },
					{ title: '宣传活动', cate: 'xchd' },
				],
				typeC:{
					'健康陕西':'jksx',
					'百姓健康系列栏目':'bxjkxl',
					'健康知识':'jkzs',
					'科普资料':'kpzl',
					'宣传活动':'xchd',
				},
				cateStr:'',
			}
		},
		onLoad(){
			this.getInit()
		},
		methods: {
			// init
			getInit(){
				search.queryByPage({pUid: "0"}).then(res => {
					if(res.data.code == 200){
						res.data.data.rows.sort(function(a,b){return a['sort'] - b['sort'];});
						res.data.data.rows.forEach(item => {
							this.pickerData.push(item.classifyName)
						})
						this.listParams.forEach(item => {
							this.getCategry(item);
						})
					}
				})
			},
			// 分类查询
			getCategry(item){
				search.queryByClassifyName({ classifyName:item.title }).then(res => {
					if(res.data.code == 200){
						let ress = res.data.data['0']['children'],
							data = [];
						if(item.cate == 'bxjkxl'){
							data.push({ classifyName:'全部' })
							ress.forEach((item,key)=>{
								data.push({ classifyName:item.classifyName});
							})
							this.cateList[item.cate] = data;
						}else if(item.cate == 'xchd'){
							this.cateList[item.cate] = [
								{ classifyName:'全部' },
								{ classifyName:'社区活动' },
								{ classifyName:'论坛讲座' },
								{ classifyName:'卫生宣传日' },
							];
						}else{
							ress.forEach((item,key)=>{
								let arr =  [{ uid:0, classifyName:'全部' }];
								data.push({ classifyName:item.classifyName});
								item.children.forEach(item1 => {
									arr.push(item1)
								})
								data[key]['children'] = arr
							})
							this.cateList[item.cate] = data;
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 搜索查询列表
			queryList(){
				let that = this,
					params = {
						startTime: that.startTime,
						endTime: that.endTime,
						pageIndex: that.pageIndex,
						pageSize: that.pageSize,
						optionType: that.optionType,
						keyWord: that.keyWord,
						category: that.category == '全部' ? '' : that.category,
						classify: that.classify == '全部' ? '' : that.classify,
						dateType: that.dateType == '全部' ? '' : that.dateType,
						format: that.format == '全部' ? '' : that.format,
					};
				search.queryList(params).then(res => {
					if(res.data.code == 200){
						that.list = [...that.list,...res.data.data.rows]
						that.total = res.data.data.total;
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 文章详情
			goDetails(data) {
				uni.navigateTo({
					url: "/pages/details/details?uid=" + data.uid
				});
			},
			// 搜索
			search(e){
				// this.keyWord = e.value;
				this.list = [];
				this.pageIndex = 1;
				this.queryList();
			},
			// 清空搜索框
			cancel(){
				this.keyWord = '';
				this.pageIndex = 1;
				this.queryList();
			},
			// 搜索右边筛选
			pickerChange: function(e) {
				this.pickerIndex = e.detail.value
				this.optionType = this.pickerData[e.detail.value],
				this.cateStr = this.typeC[this.optionType] == undefined ? '' : this.typeC[this.optionType]
			},
			// 选择类型
			changeClassify(e,index){
				this.classifyIndex = index;
				this.classify = e;
			},
			// 选择格式
			changeFormat(e,index){
				this.formatIndex = index;
				this.format = e;
			},
			// 选择日期
			changeDateType(e,index){
				this.dateTypeIndex = index;
				this.dateType = e;
				this.timePicker = '';
			},
			// 日期选择
			changeDataPicker(e) {
				this.dateTypeIndex = 99;
				this.startTime = e[0];
				this.endTime = e[1];
			},
			// 选择类型
			changeCategory(e,index){
				this.categoryIndex = index;
				this.category = e;
			},
		},
		// 下拉
		onReachBottom () {
			if (this.pageIndex * this.pageSize >= this.total) {
				this.isOver = true;
				return;
			} else {
				this.pageIndex++
				this.queryList();
			}
		}
	}
</script>

<style lang="scss" scoped>
.main{
	background: #fff;
	.search{
		display: flex;
		.serch{
			height:80rpx;
			line-height:80rpx;
			flex:1;
		}
		.select{
			border-radius: 0 8rpx 8rpx 0;
			width:150rpx;
			margin-top:20rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			margin-right: 20rpx;
			font-size: 14px;
			color: #333;
			background: #EEEEEE;
			border-left: 1px solid #fff;
			overflow: hidden;
			padding: 0 5rpx;
		}
	}
	.serch-params{
		margin:30rpx 20rpx;
		.title{
			display:flex;
			.line{
				background-image: linear-gradient(to bottom, #28af94, #2ce9f2);
				width:6rpx;
				height: 40rpx;
				margin:5rpx  15rpx 5rpx 0;
			}
			font-weight: bold;
			font-size:32rpx;
			height: 50rpx;
		}
		.item-list{
			display: flex;
			flex-wrap:wrap;
			view{
				padding:5rpx 10rpx;
				text-align: center;
				background: #fafafa;
				margin:10rpx;
				border-radius:5px;
				font-size: 14px;
				color: #333;
				height:60rpx;
				line-height:60rpx;
			}
			.current{
				background: #27A280;
				color: #fff;
			}
		}
	}
	.list-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		box-sizing: border-box;
		.list-item {
			width: 100%;
			display: flex;
			padding: 30rpx 0;
			border-bottom: solid 1rpx #F5F7F7;
			.left {
				image {
					width: 180rpx;
					height: 135rpx;
					border-radius: 16rpx;
				}
			}
			.right {
				flex: 1;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					width: 480rpx;
					color: #666666;
					font-size: 30rpx;
					font-weight: 500;
					display: flex;
					align-items: center;
	
					.play-icon {
						width: 26rpx;
						height: 20rpx;
						margin-right: 20rpx;
					}
	
					.titleName {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.from-and_date {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		.isOver{
			text-align: center;
			font-size: 12px;
			color:#bbb;
			height:60rpx;
			line-height:60rpx;
		}
	}
}
/deep/.uni-searchbar{
	padding:20rpx 0 20rpx 20rpx !important;
}
/deep/.uni-calendar-item--multiple .uni-calendar-item--before-checked,/deep/.uni-calendar-item--multiple .uni-calendar-item--after-checked{
	background-color:#27A280 !important;
}
/deep/.uni-calendar-item__weeks-box .uni-calendar-item--checked{
	background-color:#27A280 !important;
}
/deep/.uni-datetime-picker--btn{
	background-color:#27A280 !important;
}
/deep/.uni-calendar-item--today{
	background-color:#fff !important;
}
/deep/.datetime-picker--uni-date{
	-webkit-flex: none !important;
	flex: none !important;
	width:80% !important;
}
</style>